<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>七夕情书 | 致我最爱的人</title>
        <script src="https://cdn.tailwindcss.com"></script>
        <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet" />

        <!-- 配置Tailwind自定义颜色和字体 -->
        <script>
            tailwind.config = {
                theme: {
                    extend: {
                        colors: {
                            love: {
                                light: "#FFD1DC",
                                DEFAULT: "#FF69B4",
                                dark: "#C71585",
                            },
                            night: {
                                light: "#E6E6FA",
                                DEFAULT: "#483D8B",
                                dark: "#0F172A",
                            },
                        },
                        fontFamily: {
                            love: ['"Ma Shan Zheng"', '"Noto Serif SC"', "serif"],
                        },
                    },
                },
            };
        </script>

        <!-- 引入中文字体 -->
        <link
            href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;700&display=swap"
            rel="stylesheet"
        />

        <style type="text/tailwindcss">
            @layer utilities {
                .text-shadow {
                    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
                }
                .text-shadow-lg {
                    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
                }
                .animate-float {
                    animation: float 6s ease-in-out infinite;
                }
                .animate-float-slow {
                    animation: float 8s ease-in-out infinite;
                }
                .animate-float-fast {
                    animation: float 4s ease-in-out infinite;
                }
                .animate-twinkle {
                    animation: twinkle 3s ease-in-out infinite;
                }
                .bg-stars {
                    background-image: radial-gradient(2px 2px at 20px 30px, #ffffff, rgba(0, 0, 0, 0)),
                        radial-gradient(2px 2px at 40px 70px, #ffffff, rgba(0, 0, 0, 0)),
                        radial-gradient(2px 2px at 50px 160px, #ffffff, rgba(0, 0, 0, 0)),
                        radial-gradient(2px 2px at 90px 40px, #ffffff, rgba(0, 0, 0, 0)),
                        radial-gradient(2px 2px at 130px 80px, #ffffff, rgba(0, 0, 0, 0));
                    background-repeat: repeat;
                    background-size: 200px 200px;
                    background-color: #001350;
                }
                .animate-fall {
                    animation: fall linear infinite;
                }
            }

            @keyframes float {
                0% {
                    transform: translateY(0px);
                }
                50% {
                    transform: translateY(-20px);
                }
                100% {
                    transform: translateY(0px);
                }
            }

            @keyframes twinkle {
                0% {
                    opacity: 0.5;
                }
                50% {
                    opacity: 1;
                }
                100% {
                    opacity: 0.5;
                }
            }

            @keyframes fall {
                0% {
                    transform: translateY(-10px) rotate(0deg);
                    opacity: 1;
                }
                100% {
                    transform: translateY(calc(100vh + 10px)) rotate(360deg);
                    opacity: 0;
                }
            }

            .letter-paper {
                background-color: rgba(255, 255, 255, 0.9);
                background-image: linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
                    linear-gradient(#eee 0.1em, transparent 0.1em);
                background-size: 100% 1.2em;
            }

            .heart {
                position: relative;
                width: 50px;
                height: 45px;
                transform: rotate(-45deg);
                animation: heartbeat 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
            }

            .heart:before,
            .heart:after {
                content: "";
                position: absolute;
                width: 50px;
                height: 50px;
                background-color: #ff69b4;
                border-radius: 50%;
            }

            .heart:before {
                top: -25px;
                left: 0;
            }

            .heart:after {
                top: 0;
                right: -25px;
            }

            @keyframes heartbeat {
                0% {
                    transform: rotate(-45deg) scale(0.8);
                }
                5% {
                    transform: rotate(-45deg) scale(0.9);
                }
                10% {
                    transform: rotate(-45deg) scale(0.8);
                }
                15% {
                    transform: rotate(-45deg) scale(1);
                }
                50% {
                    transform: rotate(-45deg) scale(0.8);
                }
                100% {
                    transform: rotate(-45deg) scale(0.8);
                }
            }

            /* 星光跟随层 */
            #star-follower {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;
                z-index: 1;
            }

            .follower-star {
                position: absolute;
                width: 1px;
                height: 1px;
                background-color: white;
                border-radius: 50%;
                opacity: 0.7;
            }

            /* 花瓣元素 */
            .petal {
                position: fixed;
                color: #ffd1dc;
                opacity: 0.7;
                pointer-events: none;
                z-index: 2;
            }

            /* 烟花容器 */
            #fireworks-container {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;
                z-index: 3;
            }

            .firework {
                position: absolute;
                transform-origin: bottom center;
            }

            .firework-particle {
                position: absolute;
                border-radius: 50%;
                opacity: 0;
            }
        </style>
    </head>
    <body class="min-h-screen bg-gradient-to-br from-night-dark via-slate-900 to-indigo-950 bg-stars overflow-x-hidden">
        <!-- 烟花容器 -->
        <div id="fireworks-container"></div>

        <!-- 星光跟随层 -->
        <div id="star-follower"></div>

        <!-- 花瓣容器 -->
        <div id="petal-container"></div>

        <!-- 装饰性爱心 - 移动端适当减少 -->
        <div
            class="fixed top-10 left-[5%] heart opacity-20 animate-float-fast"
            style="width: 25px; height: 22.5px"
        ></div>
        <div class="fixed top-40 right-[8%] heart opacity-15 animate-float" style="width: 20px; height: 18px"></div>
        <div
            class="fixed bottom-40 left-[15%] heart opacity-20 animate-float-slow"
            style="width: 30px; height: 27px"
        ></div>

        <!-- 星星装饰 -->
        <div class="fixed top-10 left-[30%] w-1.5 h-1.5 bg-white rounded-full animate-twinkle"></div>
        <div
            class="fixed top-30 right-[25%] w-1 h-1 bg-white rounded-full animate-twinkle"
            style="animation-delay: 0.5s"
        ></div>
        <div
            class="fixed bottom-60 right-[10%] w-1.5 h-1.5 bg-white rounded-full animate-twinkle"
            style="animation-delay: 1s"
        ></div>
        <div
            class="fixed bottom-20 left-[5%] w-1 h-1 bg-white rounded-full animate-twinkle"
            style="animation-delay: 1.5s"
        ></div>

        <!-- 标题区域 -->
        <header class="pt-8 pb-4 text-center relative z-4 px-4">
            <h1 class="text-[clamp(1.8rem,8vw,3rem)] font-love text-white text-shadow-lg mb-2">七夕情书</h1>
            <p class="text-love-light text-[clamp(0.9rem,3vw,1.1rem)] max-w-lg mx-auto">农历七月初七 · 与你共度</p>
        </header>

        <!-- 主要内容区 -->
        <main class="max-w-2xl mx-auto px-4 pb-16 relative z-4">
            <!-- 情书卡片 - 移动端调整内边距和阴影 -->
            <div
                class="letter-paper rounded-lg shadow-xl p-5 md:p-8 relative overflow-hidden transform transition-all duration-500 hover:shadow-love/30 hover:-translate-y-1"
            >
                <!-- 收信人 -->
                <div class="text-right mb-6">
                    <p class="text-[clamp(1.1rem,5vw,1.5rem)] font-love text-night-dark">
                        致我最亲爱的 <span id="recipient" class="text-love-dark">琪琪</span>：
                    </p>
                </div>

                <!-- 情书内容 - 增加行高提高可读性 -->
                <div
                    id="letter-content"
                    class="text-[clamp(0.95rem,4vw,1.15rem)] leading-relaxed text-gray-800 mb-8 min-h-[250px] md:min-h-[300px]"
                ></div>

                <!-- 署名和日期 -->
                <div class="text-right">
                    <p class="text-[clamp(1.1rem,5vw,1.4rem)] font-love text-night-dark mb-2">
                        永远爱你的 <span id="sender" class="text-love-dark">J.Z</span>
                    </p>
                    <p class="text-gray-600 text-sm">七夕之夜</p>
                </div>
            </div>

            <!-- 互动按钮 - 移动端增大点击区域 -->
            <div class="mt-8 text-center">
                <button
                    id="replay-btn"
                    class="bg-love hover:bg-love-dark text-white font-bold py-3 px-6 w-full md:w-auto rounded-full shadow-lg transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-love/50 mb-4 md:mb-0"
                >
                    <i class="fa fa-refresh mr-2"></i>再读一次
                </button>

                <!-- <div class="mt-4">
                    <button
                        id="change-names"
                        class="bg-transparent border-2 border-love-light text-love-light hover:bg-love-light hover:text-night-dark font-medium py-3 px-6 w-full md:w-auto rounded-full shadow transition-all duration-300"
                    >
                        <i class="fa fa-pencil mr-2"></i>修改名字
                    </button>
                </div> -->
            </div>
        </main>

        <!-- 页脚 - 移动端简化 -->
        <footer class="text-center text-white/70 text-xs py-4 relative z-4">
            <p>愿天下有情人终成眷属 · 七夕快乐</p>
        </footer>

        <!-- 修改名字的模态框 - 优化移动端显示 -->
        <div id="name-modal" class="fixed inset-0 bg-black/70 flex items-center justify-center z-50 hidden p-4">
            <div class="bg-white rounded-lg p-6 w-full max-w-md shadow-2xl transform transition-all">
                <h3 class="text-xl font-love text-night-dark mb-4 text-center">写下你们的名字</h3>

                <div class="space-y-4">
                    <div>
                        <label for="your-name" class="block text-gray-700 mb-1 text-sm">你的名字：</label>
                        <input
                            type="text"
                            id="your-name"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-love focus:border-transparent"
                            placeholder="我"
                        />
                    </div>

                    <div>
                        <label for="their-name" class="block text-gray-700 mb-1 text-sm">对方的名字：</label>
                        <input
                            type="text"
                            id="their-name"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-love focus:border-transparent"
                            placeholder="你"
                        />
                    </div>

                    <div class="pt-4 text-center">
                        <button
                            id="save-names"
                            class="bg-love hover:bg-love-dark text-white font-bold py-3 px-6 rounded-full shadow transition-all duration-300 w-full"
                        >
                            保存
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <script>
            // 情书内容
            const letterText = `
        又是一年七夕，星空格外明亮，鹊桥横跨银河，等待着牛郎织女的相会。
        
        遇见你之前，我从未想过，原来心动是这样一种感觉——像是微风拂过湖面，泛起圈圈涟漪；又像是流星划过夜空，瞬间点亮整个世界。
        
        和你在一起的每一天，都像是被温柔包裹。你的笑容，是我见过最美的风景；你的声音，是我听过最动听的旋律。无论是晴天还是雨天，只要有你在身边，我的世界就充满了阳光。
        
        我喜欢和你一起看日出日落，喜欢和你一起分享生活中的点点滴滴，喜欢听你讲有趣的故事，也喜欢听你倾诉内心的烦恼。和你在一起的每一刻，都让我觉得无比珍贵。
        
        今天，在这个浪漫的日子里，我想告诉你：我爱你。不是一时兴起，而是深思熟虑；不是浮于表面，而是发自内心。
        
        愿我们的爱情，如同七夕的传说一般，跨越山海，历经考验，却始终坚定不移。愿往后余生，每一个七夕，我都能陪在你身边。
        
        我爱你，不止今天，而是朝朝暮暮，岁岁年年。
        `;

            // 根据设备类型调整特效强度
            const isMobile = window.innerWidth < 768;

            // 创建飘落的花瓣 - 移动端减少数量
            function createPetals() {
                const container = document.getElementById("petal-container");
                const totalPetals = isMobile ? 8 : 30; // 移动端减少花瓣数量

                // 清除现有花瓣
                container.innerHTML = "";

                for (let i = 0; i < totalPetals; i++) {
                    const petal = document.createElement("div");
                    petal.classList.add("petal", "animate-fall");

                    // 随机花瓣样式
                    const symbols = ["❀", "✿", "🌸", "💮", "❦"];
                    petal.textContent = symbols[Math.floor(Math.random() * symbols.length)];

                    // 随机大小 - 移动端花瓣略小
                    const size = isMobile ? Math.random() * 10 + 8 : Math.random() * 16 + 10;
                    petal.style.fontSize = `${size}px`;

                    // 随机水平位置
                    const left = Math.random() * 100;
                    petal.style.left = `${left}%`;

                    // 随机透明度
                    petal.style.opacity = Math.random() * 0.6 + 0.3;

                    // 随机动画 duration
                    const duration = Math.random() * 20 + 10;
                    petal.style.animationDuration = `${duration}s`;

                    // 随机延迟
                    const delay = Math.random() * 10;
                    petal.style.animationDelay = `${delay}s`;

                    // 随机颜色
                    const colors = ["#FFD1DC", "#FFB6C1", "#FF69B4", "#FF85A1", "#FFB7C5"];
                    petal.style.color = colors[Math.floor(Math.random() * colors.length)];

                    container.appendChild(petal);
                }
            }

            // 创建鼠标/触摸跟随的星光 - 移动端减少数量
            function createStarFollower() {
                const container = document.getElementById("star-follower");
                const starCount = isMobile ? 8 : 15; // 移动端减少星光数量

                // 创建多个星星
                for (let i = 0; i < starCount; i++) {
                    const star = document.createElement("div");
                    star.classList.add("follower-star");
                    star.style.transform = `translate(-50%, -50%)`;
                    // 不同大小的星星
                    const size = Math.random() * 2 + 1;
                    star.style.width = `${size}px`;
                    star.style.height = `${size}px`;
                    container.appendChild(star);
                }

                // 处理鼠标和触摸事件
                function moveStars(x, y) {
                    const stars = container.querySelectorAll(".follower-star");
                    stars.forEach((star, index) => {
                        // 让星星形成一个轨迹
                        const offsetX = (index - starCount / 2) * 8;
                        const offsetY = Math.sin(index * 0.5) * 8;
                        const delay = index * 0.05;

                        setTimeout(() => {
                            star.style.left = `${x + offsetX}px`;
                            star.style.top = `${y + offsetY}px`;
                        }, delay * 100);
                    });
                }

                // 鼠标移动
                document.addEventListener("mousemove", (e) => {
                    moveStars(e.clientX, e.clientY);
                });

                // 触摸移动 (移动端)
                document.addEventListener(
                    "touchmove",
                    (e) => {
                        e.preventDefault(); // 防止滚动干扰
                        const touch = e.touches[0];
                        moveStars(touch.clientX, touch.clientY);
                    },
                    { passive: false }
                );
            }

            // 创建烟花效果 - 移动端调整大小
            function createFirework() {
                const container = document.getElementById("fireworks-container");

                // 随机位置和颜色
                const startX = Math.random() * window.innerWidth;
                const startY = window.innerHeight;
                // 移动端烟花位置稍低
                const endY = isMobile
                    ? Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.1
                    : Math.random() * window.innerHeight * 0.6 + window.innerHeight * 0.1;
                const hue = Math.random() * 360;
                // 移动端烟花粒子数量减少
                const particleCount = isMobile
                    ? Math.floor(Math.random() * 30) + 30
                    : Math.floor(Math.random() * 50) + 50;
                // 移动端烟花尺寸稍小
                const explosionSize = isMobile ? Math.random() * 80 + 80 : Math.random() * 100 + 100;

                // 创建烟花上升动画
                const firework = document.createElement("div");
                firework.classList.add("firework");
                firework.style.left = `${startX}px`;
                firework.style.bottom = `0px`;
                firework.style.width = "2px";
                firework.style.height = "0px";
                firework.style.backgroundColor = `hsl(${hue}, 80%, 60%)`;
                container.appendChild(firework);

                // 上升动画
                const 上升距离 = startY - endY;
                firework.style.transition = `height 1s ease-out`;
                setTimeout(() => {
                    firework.style.height = `${上升距离}px`;

                    // 到达顶点后爆炸
                    setTimeout(() => {
                        // 移除上升的烟花
                        container.removeChild(firework);

                        // 创建爆炸粒子
                        for (let i = 0; i < particleCount; i++) {
                            const particle = document.createElement("div");
                            particle.classList.add("firework-particle");

                            // 随机粒子属性
                            const angle = (i / particleCount) * Math.PI * 2;
                            const distance = Math.random() * explosionSize;
                            const size = isMobile ? Math.random() * 2 + 1 : Math.random() * 3 + 1;
                            const color = `hsl(${hue + (Math.random() * 40 - 20)}, 80%, 60%)`;

                            // 位置和样式
                            particle.style.left = `${startX}px`;
                            particle.style.top = `${endY}px`;
                            particle.style.width = `${size}px`;
                            particle.style.height = `${size}px`;
                            particle.style.backgroundColor = color;

                            container.appendChild(particle);

                            // 爆炸动画
                            setTimeout(() => {
                                particle.style.transition = `all 0.8s ease-out`;
                                particle.style.transform = `translate(${Math.cos(angle) * distance}px, ${
                                    Math.sin(angle) * distance
                                }px)`;
                                particle.style.opacity = "1";

                                // 淡出效果
                                setTimeout(() => {
                                    particle.style.opacity = "0";
                                    setTimeout(() => {
                                        if (container.contains(particle)) {
                                            container.removeChild(particle);
                                        }
                                    }, 800);
                                }, 500);
                            }, 10);
                        }
                    }, 1000);
                }, 10);
            }

            // 连续发射多个烟花 - 移动端减少数量
            function launchFireworks(count = isMobile ? 3 : 5) {
                for (let i = 0; i < count; i++) {
                    setTimeout(() => {
                        createFirework();
                    }, i * 1000);
                }
            }

            // 打字效果函数 - 移动端稍快
            function typeWriter(text, element, speed = isMobile ? 40 : 50, i = 0) {
                if (i < text.length) {
                    // 保留换行
                    const char = text.charAt(i) === "\n" ? "<br>" : text.charAt(i);
                    element.innerHTML += char;
                    i++;
                    setTimeout(() => typeWriter(text, element, speed, i), speed);
                }
            }

            // 初始化打字效果
            function initLetter() {
                const letterContent = document.getElementById("letter-content");
                letterContent.innerHTML = "";
                // 稍微延迟开始，增加期待感
                setTimeout(() => {
                    typeWriter(letterText, letterContent);
                }, 500);
            }

            // 事件监听
            document.getElementById("replay-btn").addEventListener("click", () => {
                // 添加按钮点击动画
                const btn = document.getElementById("replay-btn");
                btn.classList.add("scale-90");
                setTimeout(() => {
                    btn.classList.remove("scale-90");
                    initLetter();
                    // 重新创建花瓣和烟花
                    createPetals();
                    launchFireworks(isMobile ? 2 : 3);
                }, 200);
            });

            document.getElementById("change-names").addEventListener("click", () => {
                document.getElementById("name-modal").classList.remove("hidden");
                // 填充当前名字
                document.getElementById("your-name").value = document.getElementById("sender").textContent;
                document.getElementById("their-name").value = document.getElementById("recipient").textContent;
            });

            document.getElementById("save-names").addEventListener("click", () => {
                const yourName = document.getElementById("your-name").value.trim() || "我";
                const theirName = document.getElementById("their-name").value.trim() || "你";

                document.getElementById("sender").textContent = yourName;
                document.getElementById("recipient").textContent = theirName;

                document.getElementById("name-modal").classList.add("hidden");

                // 重新播放打字效果
                initLetter();
                // 名字修改后也放烟花
                launchFireworks(isMobile ? 1 : 2);
            });

            // 点击模态框外部关闭
            document.getElementById("name-modal").addEventListener("click", (e) => {
                if (e.target === document.getElementById("name-modal")) {
                    document.getElementById("name-modal").classList.add("hidden");
                }
            });

            // 初始化页面
            window.addEventListener("DOMContentLoaded", () => {
                initLetter();
                createPetals();
                createStarFollower();

                // 页面加载后发射烟花
                setTimeout(() => {
                    launchFireworks(isMobile ? 3 : 5);
                }, 1000);

                // 定时发射烟花，移动端频率稍低
                setInterval(() => {
                    if (Math.random() > (isMobile ? 0.85 : 0.7)) {
                        launchFireworks(1);
                    }
                }, 5000);

                // 窗口大小改变时重新创建花瓣
                window.addEventListener("resize", () => {
                    // 重新判断设备类型
                    createPetals();
                });

                // 添加页面载入动画
                document.body.classList.add("opacity-0");
                setTimeout(() => {
                    document.body.classList.remove("opacity-0");
                    document.body.classList.add("transition-opacity", "duration-1000", "opacity-100");
                }, 100);
            });
        </script>
    </body>
</html>
